<template>
  <div class="layout-container main reset-styles">
    <el-card shadow="always" class="card">
      <div>
        <div style="padding-bottom: 20px">
          <el-page-header :icon="ArrowLeft" @back="backToProblem">
            <template #content>
              <div class="flex items-center">
              </div>
            </template>
          </el-page-header>
        </div>
      </div>
    </el-card>
  </div>

</template>

<style scoped>
.reset-styles {
  all: initial;
}
.main {
  padding-top: 20px;
}
::v-deep blockquote {
  background-color: #f9f9f9;
  border-left: 5px solid #ccc;
  padding: 0.5em 10px;
  margin: 1em 0;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}
::v-deep .hljs, ::v-deep blockquote {
  font-family: 'Courier New', Courier, monospace;
  color: #333;
}
::v-deep .hljs {
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  overflow-x: auto;
}

</style>

<script lang="ts" setup>
import router from '@/router';
import {nextTick, onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import {API_BASE_URL, AUTH_TOKEN} from "@/config.ts";
import axios from "axios";
import {ElMessage} from "element-plus";
import {ArrowLeft} from "@element-plus/icons-vue";

const problemDetails = ref("");
onMounted(async () => {
  await nextTick();

  // Load problem details
  await loadProblemDetails();
});
const route = useRoute();
const loadProblemDetails = async () => {
  const id = route.params.id; // 从 Vuex 获取问题 ID
  const api = `${API_BASE_URL}/ProblemsGroup/problems/${id}`;
  try {
    const response = await axios.get(api, {
      headers: {'token': `${AUTH_TOKEN}`}
    });
    problemDetails.value = response.data.data;
  } catch (error) {
    console.error('Error loading problem details:', error);
    ElMessage.error('Failed to load problem details');
  }
};
const backToProblem = () => {
  router.push(`/problem-detail/${problemDetails.value.id}`)
}

</script>